<template>
    <van-popup v-model:show="popup.show">
        <div class="popup">
            <img src="@/assets/images/home_popup.png" alt="" class="popup-img1">
            <div class="popup-tips">{{ $t("wallet.tips") }}</div>
            <div class="popup-body">
                <div class="popup-contact">{{ $t("home.seek") }}</div>
                <div class="popup-text">
                    <div>{{ $t("home.hope") }}</div>
                    <div>{{ $t("home.invite") }}</div>
                </div>
            </div>
            <div class="popup-no" @click="onRemeber">
                <!-- <img src="@/assets/images/popup_right.png" alt=""> -->
                <van-icon name="checked" size="18" style="vertical-align:top" :color="popup.reme ? '#ED008C' : ''"/>
                <span>
                    {{ $t("home.noTips") }}
                </span>
            </div>
            <van-button type="primary" color="#ED008C" @click="onClose">{{ $t("home.ok") }}({{popup.timer}})</van-button>
        </div>
    </van-popup>
</template>
<script setup>
import { reactive } from "@vue/reactivity";

const popup = reactive({
    show: false,
    reme: false,
    timer: 5,
    cleTimer: null
})
function init () {
    if (localStorage.getItem("popupTimer")) return
    onShow()
    onTimeDown()
}
init()
function onRemeber () {
    popup.reme = !popup.reme
    localStorage.setItem("popupTimer", 1)
}
function onShow () {
    popup.show = !popup.show
}
function onTimeDown  () {
    popup.timer = 5
    popup.cleTimer = setInterval(() => {
        --popup.timer
        console.log("倒计时中", popup.timer)
        if (popup.timer == 0) onClose()
    }, 1000)
}
function clear () {
    console.log("进来清空了哦")
    clearInterval(popup.cleTimer)
    popup.cleTimer = null
}
function onClose () {
    clear()
    onShow()
}
</script>
<style lang="less">
    .popup {
        // margin: 33px;
        width: calc(100vw - 66px); 
        text-align: center;
        border-radius: 7px;
        font-size: 12px;
        padding-bottom: 20px;
        &-img1 {
            width: 100%;
        }
        &-tips {
            padding: 15px;
        }
        &-contact {
            color: #ED008C;
        }
        &-body {
            text-align: left;
            padding: 0 32px;
        }
        &-text {
            // width: 242px;
            color: #FF9B04;
            margin: 20px 0 40px;
            // text-align: left;
        }
        &-no {
            color: #999999;
            margin-bottom: 20px;
            img {
                vertical-align: middle;
                margin-right: 4px;
                width: 17px;
                height: 18px;
            }
        }
        .van-popup {
            border-radius: 7px;
        }
    }
</style>